<template>
	<view class="page">
		<page-list class="list-box" :api="address.getPageListAsync">
			<template #item="{item}">
				<view class="item" @click.stop="onSelectItem(item)">
					<view class="item-left">
						<view class="item-left-row">
							<view class="item-left-row-address">{{ item.address }}</view>
							<view v-if="item.isDefault" class="item-left-row-address-tag">默认</view>
						</view>
						<view class="item-left-row">
							<view class="item-left-row-name">{{ item.name }}
								<text v-if="item.gender == 1">(先生)</text>
								<text v-if="item.gender == 2">(女士)</text>
							</view>
							<view class="item-left-row-mobile">{{ item.city }}</view>
						</view>
					</view>
					<image class="item-icon" src="@/static/icon_edit_gray.png" @tap.stop="onItemEdit(item)" />
				</view>
			</template>
		</page-list>
	</view>
</template>
<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';
	import { onLoad, } from '@dcloudio/uni-app';
	import { address } from '@/mock/address';
	import { Address } from '@/webApis/v1/models';
	import { EventBus } from '@/utils/event-bus';
	const type = ref('')//select
	onLoad((options : any) => {
		type.value = options.type;
	})
	onMounted(() => {

	})
	onUnmounted(() => {

	})

	const onItemEdit = (item : Address) => {
		uni.navigateTo({
			url: '/mine/pages/address/form/address-form?id=' + item.id
		})
	}

	const onSelectItem = (item : Address) => {
		console.log('onSelectItem',type.value)
		if (type.value == 'select') {
			EventBus.emit('onSelectAddress', item);
			uni.$emit('onSelectAddress', item);
			uni.navigateBack({ });
		}
	}
</script>
<style lang="scss" scoped>
	.item {
		padding: var(--page-padding);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--page-color);
		background-color: white;
		height: 80px;
		box-sizing: border-box;

		&-left {
			display: flex;
			flex-direction: column;

			&-row {
				display: flex;
				flex-direction: row;
				align-items: center;

				&-address {
					color: var(--text-color);
					font-size: 14px;
					line-height: 20px;
					font-weight: 600;
				}

				&-tag {
					border-radius: 2px;
					background-color: #DEF3FF;
					border: 1px solid var(--primary-color);
					font-size: 10px;
					color: var(--primary-color);
					width: 40px;
					height: 16px;
					text-align: center;
					margin-left: 10px;
				}

				&-name {
					margin-top: 10px;
					font-size: 13px;
					color: var(--color-gray);
					line-height: 22px;
				}

				&-mobile {
					margin-top: 10px;
					margin-left: 10px;
					font-size: 13px;
					color: var(--color-gray);
					line-height: 22px;
				}
			}
		}

		&-icon {
			width: 18px;
			height: 18px;
		}
	}
</style>